<template>
  <view class="cohabitant-container">
    <view class="content-area">
      <view class="cohabitant-list" v-if="cohabitantList.length > 0">
        <view class="cohabitant-card" v-for="(item, index) in cohabitantList" :key="index">
          <view class="card-content">
            <view class="avatar-area">
              <view class="avatar">{{ item.name.substring(0, 1) }}</view>
              <view :class="['status-badge', item.verifyStatus === 1 ? 'verified' : 'unverified']">
                {{ item.verifyStatus === 1 ? '已认证' : '未认证' }}
              </view>
            </view>
            
            <view class="info-area">
              <text class="name">{{ item.name }}</text>
              <text class="contact">{{ item.contacts }}</text>
            </view>
            
            <view class="action-area">
              <view class="action-button edit" @click="editCohabitant(item)">
                <text class="action-icon">✎</text>
                <text class="action-text">编辑</text>
              </view>
              <view class="action-button delete" v-if="item.mainFlag === '2'" @click="deleteCohabitant(item, index)">
                <text class="action-icon">✕</text>
                <text class="action-text">删除</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      
      <view class="empty-state" v-else>
        <image class="empty-image" src="/static/images/empty-state.png" mode="aspectFit"></image>
        <text class="empty-title">暂无室友信息</text>
        <text class="empty-desc">点击"添加室友"按钮开始添加</text>
      </view>
    </view>
    
    <!-- 底部固定添加按钮 -->
    <view class="fixed-add-button" @click="addCohabitant">
      <text class="add-icon">+</text>
      <text class="add-text">添加室友</text>
    </view>
  </view>
</template>

<script>
import { cohabitantList, deleteCohabitant } from '@/api/renter'
export default {
  data() {
    return {
      cohabitantList: [],
      checkInId: '',
      apartmentId: ''
    }
  },
  onLoad(options) {
    // 页面加载时获取室友列表数据
    this.checkInId = options.checkInId
    this.apartmentId = options.apartmentId
    this.getCohabitantList(options.checkInId)
  },
  //   下拉刷新
  onPullDownRefresh() {
    this.getCohabitantList(this.checkInId)
  },
  methods: {
    getCohabitantList(checkInId) {
      uni.showLoading({
        title: '加载中'
      })
      cohabitantList(checkInId).then(res => {
        this.cohabitantList = res.data
        uni.hideLoading()
      }).catch(err => {
        uni.hideLoading()
        uni.showToast({
          title: '获取室友列表失败',
          icon: 'none'
        })
      })
    },
    addCohabitant() {
      // 跳转到详情页添加新室友
      uni.navigateTo({
        url: `/pages/home/cohabitant/detail?checkInId=${this.checkInId}&apartmentId=${this.apartmentId}`
      })
    },
    editCohabitant(item) {
      // 跳转到详情页编辑室友信息，携带室友数据
      uni.navigateTo({
        url: `/pages/home/cohabitant/detail?renterId=${item.renterId}`
      })
    },
    deleteCohabitant(item, index) {
      uni.showModal({
        title: '提示',
        content: `确定要删除室友"${item.name}"吗？`,
        success: (res) => {
          if (res.confirm) {
            // 这里应该调用API删除室友
            deleteCohabitant(item.renterId).then(res => {
              // this.cohabitantList.splice(index, 1)
              this.getCohabitantList(this.checkInId)
              uni.showToast({
                title: '删除成功',
                icon: 'success'
              })
            }).catch(err => {
              uni.showToast({
                title: '删除失败',
                icon: 'none'
              })
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.cohabitant-container {
  min-height: 100vh;
  background-color: #f8f9fc;
  position: relative;
  padding-bottom: 140rpx; /* 为底部按钮留出空间 */
  
  .content-area {
    padding: 30rpx;
    
    .cohabitant-list {
      .cohabitant-card {
        background-color: #ffffff;
        border-radius: 16rpx;
        margin-bottom: 24rpx;
        box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
        overflow: hidden;
        
        .card-content {
          padding: 30rpx;
          display: flex;
          align-items: center;
          
          .avatar-area {
            position: relative;
            margin-right: 24rpx;
            
            .avatar {
              width: 100rpx;
              height: 100rpx;
              background: linear-gradient(135deg, #6773e9, #4a90e2);
              border-radius: 50%;
              display: flex;
              justify-content: center;
              align-items: center;
              color: #ffffff;
              font-size: 40rpx;
              font-weight: 600;
            }
            
            .status-badge {
              position: absolute;
              bottom: -6rpx;
              right: -6rpx;
              font-size: 20rpx;
              padding: 4rpx 12rpx;
              border-radius: 20rpx;
              
              &.verified {
                background-color: #4caf50;
                color: #ffffff;
              }
              
              &.unverified {
                background-color: #ff9800;
                color: #ffffff;
              }
            }
          }
          
          .info-area {
            flex: 1;
            
            .name {
              font-size: 34rpx;
              font-weight: 600;
              color: #333333;
              margin-bottom: 8rpx;
              display: block;
            }
            
            .contact {
              font-size: 26rpx;
              color: #666666;
              display: block;
            }
          }
          
          .action-area {
            display: flex;
            
            .action-button {
              display: flex;
              flex-direction: column;
              align-items: center;
              padding: 0 20rpx;
              
              .action-icon {
                font-size: 36rpx;
                margin-bottom: 6rpx;
              }
              
              .action-text {
                font-size: 22rpx;
              }
              
              &.edit {
                color: #4a90e2;
              }
              
              &.delete {
                color: #f44336;
              }
            }
          }
        }
      }
    }
    
    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 100rpx 0;
      
      .empty-image {
        width: 240rpx;
        height: 240rpx;
        margin-bottom: 30rpx;
      }
      
      .empty-title {
        font-size: 34rpx;
        font-weight: 600;
        color: #333333;
        margin-bottom: 16rpx;
      }
      
      .empty-desc {
        font-size: 28rpx;
        color: #999999;
        margin-bottom: 40rpx;
      }
    }
  }
  
  .fixed-add-button {
    margin: 0 30rpx;
    position: fixed;
    bottom: 40rpx;
    width: calc(100% - 60rpx);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #4a90e2, #6773e9);
    padding: 20rpx 60rpx;
    border-radius: 50rpx;
    box-shadow: 0 6rpx 16rpx rgba(73, 143, 226, 0.3);
    z-index: 100;
    
    .add-icon {
      font-size: 36rpx;
      color: #ffffff;
      margin-right: 12rpx;
    }
    
    .add-text {
      font-size: 30rpx;
      color: #ffffff;
      font-weight: 500;
    }
  }
}
</style>
